<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryRef"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item label="所属课程" prop="courseId">
				<el-select
					v-model="queryParams.courseId"
					placeholder="请选择"
					clearable
					@change="handleChangeCoures"
				>
					<el-option
						v-for="item in selectCourses"
						:key="item.courseId"
						:label="item.courseName"
						:value="item.courseId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="考试班级" prop="classId">
				<el-select
					v-model="queryParams.classId"
					placeholder="请选择"
					clearable
					@change="handleChangeClass"
					@focus="handleClassFocus"
				>
					<el-option
						v-for="item in selectClasses"
						:key="item.classId"
						:label="item.className"
						:value="item.classId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="考试题目" prop="exameId">
				<el-select
					v-model="queryParams.exameId"
					placeholder="请选择"
					clearable
					@focus="handleExameFocus"
				>
					<el-option
						v-for="item in selectExames"
						:key="item.exameId"
						:label="item.exameTitle"
						:value="item.exameId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery"
					>搜索</el-button
				>
				<el-button type="primary" v-hasPermi="['invigilateCenter:testSet']" icon="Promotion" @click="changeScreenSetting"
					>切屏设置</el-button
				>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
			<right-toolbar
				v-model:showSearch="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>
		<el-table
			v-loading="loading"
			:data="InvigilateCenterTabledata"
			@selection-change="handleSelectionChange"
		>
			<!-- 考试名称、考试类型、课程名称、考试班级、学员姓名、考试时间、
       状态（0 未开始，1 进行中，2 审批中，3 已发布 、
       班主任、理论成绩、实操成绩； -->
			<el-table-column label="课程名称" align="center" prop="courseName" />
			<el-table-column label="考试名称" align="center" prop="exameTitle" />
			<el-table-column
				label="考试开始时间"
				align="center"
				prop="exameStartTime"
			/>
			<el-table-column label="考试班级" align="center" prop="className" />
			<el-table-column label="考生姓名" align="center" prop="stuName" />
			<el-table-column label="考试追溯查看" align="center" prop="sjScore">
				<template #default="scope">
					<el-button
						type="primary"
						v-if="scope.row.videoId"
						link
						@click="handleSeeVideo(scope.row)"
						>点击查看</el-button
					>
					<el-button type="primary" link @click="handleUploadVideo(scope.row)"
						>上传</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<!-- 添加或修改录播观看对话框 -->
		<el-dialog
			title="视频上传"
			v-model="upVideoVisible"
			width="500px"
			append-to-body
		>
			<el-form ref="couseTimeRef" :model="videoForm" label-width="80px">
				<el-form-item required label="视频" prop="videoId">
					<VideoUpload v-model="videoUrl" @change="handleVideoChange" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitVideoForm">确 定</el-button>
					<el-button @click="videoCancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
		<PlayVideo v-model:visible="showVideo" :play-url="selectUrl" />
		<SettingDialog ref="SettingDialogRef" />
	</div>
</template>

<script setup name="Classz">
import { queryCourseList } from "@/api/analyse.js";
import { listExame } from "@/api/exam/exame";
import {
	queryInvigilateListApi,
	queryScreenSetApi,
	traceBackVideo,
} from "@/api/invigilateCenter/index.js";
import { queryClassByCourseId } from "@/api/register/registerList.js";
import PlayVideo from "@/views/course/playVideo/index.vue";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import SettingDialog from "./settingModal.vue";
const route = useRoute();
const { proxy } = getCurrentInstance();
// 视频相关
const upVideoVisible = ref();
const videoUrl = ref("");
const showVideo = ref();
const selectUrl = ref();
const handleUploadVideo = (row) => {
	videoForm.value = Object.assign({}, row);
	upVideoVisible.value = true;
};
const videoCancel = () => {
	videoUrl.value = "";
	upVideoVisible.value = false;
};
/** 查看视频 */
const handleSeeVideo = (item) => {
	selectUrl.value = import.meta.env.VITE_APP_BASE_IMG_URL + item.videoUrl;
	showVideo.value = true;
};
const submitVideoForm = async () => {
	if (!videoForm.value.videoId) {
		ElMessage.warning("请选择视频！");
		return;
	}
	const res = await traceBackVideo(videoForm.value);
	if (res.code === 200) {
		proxy.$modal.msgSuccess("视频提交成功");
		upVideoVisible.value = false;
		getList();
	}
};
/** 上传删除视频 */
const handleVideoChange = (item) => {
	if (item.fileId && item.fileId != "") {
		videoForm.value.videoId = item.fileId;
	} else {
		videoForm.value.videoId = null;
	}
};
// 下拉数据列表
const selectExames = ref([]);
const selectClasses = ref([]);
const selectCourses = ref([]);
//
const InvigilateCenterTabledata = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		exameId: null,
		classId: null,
		courseId: null,
	},
	videoForm: {},
});

const { queryParams, videoForm } = toRefs(data);

onMounted(() => {
	getSelectList();
	queryParams.value.courseId = route.query.courseId
		? Number(route.query.courseId)
		: null;
	if (queryParams.value.courseId && queryParams.value.courseId !== "") {
		queryClassByCourseId({ courseId: queryParams.value.courseId }).then(
			(response) => {
				if (response.code === 200) {
					selectClasses.value = response.data;
				}
			}
		);
	}
	queryParams.value.classId = route.query.classId
		? Number(route.query.classId)
		: null;
	if (queryParams.value.classId && queryParams.value.classId !== "") {
		handleChangeClass();
	}
	getList();
});

// 切屏设置
const SettingDialogRef = ref(null);
const changeScreenSetting = async () => {
	let screenSetRes = await queryScreenSetApi();
	if (screenSetRes.code === 200) {
		SettingDialogRef.value.openController(screenSetRes.data);
	}
};
// change事件
const handleChangeCoures = (item) => {
	console.log("🚀 ~ handleChangeCoures ~ item:", item);
	queryParams.value.classId = null;
	selectClasses.value = [];
	queryParams.value.exameId = null;
	selectExames.value = [];
	queryClassByCourseId({ courseId: queryParams.value.courseId }).then(
		(response) => {
			if (response.code === 200) {
				selectClasses.value = response.data;
			}
		}
	);
};
const handleClassFocus = () => {
	if (!queryParams.value.courseId || queryParams.value.courseId === "") {
		ElMessage.warning("请选择课程");
		return;
	}
};
const handleChangeClass = (item) => {
	queryParams.value.exameId = null;
	selectExames.value = [];
	listExame({
		courseId: queryParams.value.courseId,
		classId: queryParams.value.classId,
		pageNum: 1,
		pageSize: 1000,
	}).then((response) => {
		if (response.code === 200) {
			selectExames.value = response.rows;
		}
	});
};
const handleExameFocus = () => {
	if (!queryParams.value.classId || queryParams.value.classId === "") {
		ElMessage.warning("请选择班级");
		return;
	}
};
// 获取下拉
const getSelectList = () => {
	queryCourseList().then((response) => {
		if (response.code === 200) {
			selectCourses.value = response.rows;
		}
	});
};

function getList() {
	loading.value = true;
	queryInvigilateListApi(queryParams.value).then((response) => {
		console.log("🚀 ~ queryInvigilateListApi ~ response:", response);
		InvigilateCenterTabledata.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1;
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map((item) => item.classId);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
}

/** 导出按钮操作 */
function handleExport() {
	proxy.download(
		"exam/theoryScore/export",
		{
			...queryParams.value,
		},
		`成绩_${new Date().getTime()}.xlsx`
	);
}
</script>
